<template>
	<view class="payDesk-content" 
		:style="{paddingTop: statusBarHeight + 'px', backgroundImage: 'url(' +  `${prefix_image}/homepage/IntegralRecord/payDesk-bg.png` + ')' }"
	>
		<view class="payDesk-header" :style="{height: height + 'px' }">
			<image :src="`${prefix_image}/homepage/IntegralRecord/payDesk-left.png`" @tap="pageback()" />
			<text>付费台</text>
		</view>
		<view class="payDesk-block">
			<view class="payDesk-block-top">
				<view class="payDesk-block-tips">
					应缴金额
				</view>
				<view class="payDesk-block-money">
					<text class="payDesk-block-money1">￥</text>
					<text class="payDesk-block-money2">86.50</text>
				</view>
			</view>
			
			<view class="payDesk-block-money-list-outer">
				<view class="payDesk-block-money-list">
					<text class="payDesk-block-money-list-left">
						就诊费
					</text>
					<text class="payDesk-block-money-list-right">￥86.50</text>
				</view>
			</view>
			
			<view class="payDesk-block-money-coupon">
				<view class="payDesk-block-money-coupon-title">
					选择优惠券
				</view>
				<view class="payDesk-block-money-coupon-content">
					<view class="payDesk-block-money-coupon-content-left">
						<image :src="`${prefix_image}/homepage/IntegralRecord/pay-coupon.png`" mode="aspectFill" />
						<text>优惠券</text>
					</view>
					<view class="payDesk-block-money-coupon-content-right">
						<text>-¥1.00</text>
						<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
					</view>
				</view>
			</view>
			
			<view class="payDesk-block-money-coupon">
				<view class="payDesk-block-money-coupon-title">
					选择支付方式
				</view>
				<view class="payDesk-block-money-coupon-content">
					<view class="payDesk-block-money-coupon-content-left">
						<image :src="`${prefix_image}/homepage/IntegralRecord/wechat-pay.png`" mode="aspectFill" />
						<text>微信支付</text>
					</view>
					<view class="payDesk-block-money-coupon-content-right">
						<label class="radio"><radio checked="true" color="#FFD300" /></label>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="confirmPayment">
			确认付款
		</view>
	</view>
</template>

<script>
import store from '@/store';
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'

export default defineComponent({
	setup() {
		const { height, statusBarHeight } = store.state.phoneInfo
		const { prefix_image }=config()
		
		const data = reactive({
			height,
			statusBarHeight,
		})
		
		const pageback = () => {
			uni.navigateBack();
		}
		return {
			...toRefs(data),
			prefix_image,
			pageback
		}
	}
})
</script>

<style lang="stylus" scoped>
.payDesk-content{
	background-color: #333;
	display: flex;
	align-items: center;
	min-height: 100vh;
	flex-direction: column;
	background-size: 100% 100%;
	.payDesk-header{
		display: flex;
		    /* justify-content: center; */
		    align-items: center;
		    width: 100vw;
			    padding-left: 32rpx;
		image{
			width: 40rpx;
			height: 40rpx;
			z-index: 1
		}
		text{
			flex: 1;
			    text-align: center;
			    margin-left: -80rpx;
		}
	}
	.payDesk-block{
		width: 686rpx;
		height: 804rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 64rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		
		margin-top: 36rpx;
		flex-direction: column;
		.payDesk-block-top{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}
		.payDesk-block-tips{
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			margin-bottom: 12rpx;
		}
		.payDesk-block-money{
			.payDesk-block-money1{
				font-size: 64rpx;
				// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
				font-weight: bold;
				color: #333333;
			}
			.payDesk-block-money2{
				font-size: 96rpx;
				// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
				font-weight: bold;
				color: #333333;
			}
		}
		
		.payDesk-block-money-list-outer{
			padding-bottom: 36rpx;
			
			.payDesk-block-money-list{
				padding-top: 76rpx;
				display: flex;
				justify-content: space-between;
				
				.payDesk-block-money-list-left{
					font-size: 32rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.payDesk-block-money-list-right{
					font-size: 32rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		
		.payDesk-block-money-coupon{
			display: flex;
			flex-direction: column;
			border-top: 1rpx solid rgba(0, 0, 0, 0.05);
			padding-top: 36rpx;
			.payDesk-block-money-coupon-title{
				font-size: 24rpx;
				font-weight: 400;
				color: #B2B2B2;
				padding-bottom: 20rpx;
			}
			.payDesk-block-money-coupon-content{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 32rpx;
				.payDesk-block-money-coupon-content-left{
					display: flex;
					align-items: center;
					image{
						width: 64rpx;
						height: 64rpx;
					}
					text{
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding-left: 12rpx;
					}
				}
				.payDesk-block-money-coupon-content-right{
					display: flex;
					text{
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF413C;
					}
					image{
						width: 44rpx;
						height: 44rpx;
					}
					
				}
			}
		}
		
	}
	
	.confirmPayment{
		position fixed;
		bottom: calc(24rpx + env(safe-area-inset-bottom)/2);
		width: 600rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
		
		font-size: 32rpx;
		// font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #111111;
		text-align: center;
		line-height: 96rpx;
	}
}	
</style>
